<template>
  <div class="pages">
    <div class="gradient-background">
      <div class="loginBox">
        <img class="login-img" src="../assets/index/head.png" alt="">
        <div class="login-content">
          <div class="login-name">
            您好，管理员
          </div>
          <div class="login-date">
            <img class="login-cal" src="../assets/index/calendar.png" alt="">
            <span> {{ nowDay }}</span>
            <span>数据已更新</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mian">
      <!-- =====================两微一端========================== -->
      <div class="dataLi">
        <div class="data-head">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">两微一端</span>
            </div>
            <div style="color:#1F76FA;font-size:.25rem;" @click="toDetial(1)">
              查看详情>
            </div>
          </div>
          <div class="tabBox" style="justify-content: flex-start;">
            <div class="tabItem" style="margin-right: 10px;" :class="{ tabActive: activeIndex == index }"
              v-for="(item, index) in typeList" :key="index" @click="changeType(index, item)">{{ item.name }}</div>
          </div>
        </div>
        <div style="min-height:4rem;">
          <div style="padding: 0.1rem 0 0.1rem;">
            <div class="main-data">
              <div class="main-left">
                <div class="left-top" >
                  <div>总用户数</div>
                  <div class="main-num">
                    <span>1231</span>
                    <span style="color: #9A9A9A;font-size: 0.38rem;">+23</span>
                  </div>
                </div>
                <div class="left-bottom">
                  <div>
                    <div class="font12">环比</div>
                    <div class="hb-num-l">-1.32%
                      <img src="../assets/index/trending-down.png" class="corner">
                    </div>
                  </div>
                </div>
              </div>
              <div class="main-right">
                <div class="right-top">
                  <div>日活</div>
                  <div class="main-num">331</div>
                </div>
                <div class="right-bottom">
                  <div class="font12">环比</div>
                  <div class="hb-num-r">2.1%
                    <img src="../assets/index/trending-up.png" class="corner">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- =====================在线客服========================== -->
      <div class="dataLi">
        <div class="data-head">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">在线客服</span>
            </div>
            <div style="color:#1F76FA;font-size:.25rem;" @click="toDetial(2)">
              查看详情>
            </div>
          </div>
          <div class="tabBox">
            <div class="tabItem" :class="{ tabActive: activeIndex1 == index }" v-for="(item, index) in zxkfArr"
              :key="index" @click="totalItemClick(index, item)">{{ item.name }}</div>
          </div>
        </div>
        <div class="main-data">
          <div class="main-left">
            <div class="left-top" style="margin-bottom: 0rem;">
              <div v-if="activeIndex1 == 0">咨询人数</div>
              <div v-if="activeIndex1 == 0" class="main-num">
                <span>{{ totalList.zixunCount }}</span>
              </div>
              <div v-if="activeIndex1 == 1">接收消息数量</div>
              <div v-if="activeIndex1 == 1" class="main-num">
                <span>{{ totalList.jieshouCount }}</span>
              </div>
              <div v-if="activeIndex1 == 2">回复数</div>
              <div v-if="activeIndex1 == 2" class="main-num">
                <span>{{ totalList.huifuCount }}</span>
              </div>
            </div>
          </div>
          <div class="right-bottom">
                  <div class="font12">环比</div>
                  <div v-if="activeIndex1 == 0" class="hb-num-r">{{ totalList.zixunHBPercent }}
                    <img v-if="totalList.length && parseFloat(totalList.zixunHBPercent.replace('%', '')) > 0" src="../assets/index/trending-up.png" class="corner">
                    <img v-if="totalList.length && parseFloat(totalList.zixunHBPercent.replace('%', '')) < 0" src="../assets/index/trending-down.png" class="corner">
                  </div>
                  <div v-if="activeIndex1 == 1" class="hb-num-r">{{ totalList.jieshouHBPercent }}
                    <img v-if="totalList.length && parseFloat(totalList.jieshouHBPercent.replace('%', '')) > 0" src="../assets/index/trending-up.png" class="corner">
                    <img v-if="totalList.length && parseFloat(totalList.jieshouHBPercent.replace('%', '')) < 0" src="../assets/index/trending-down.png" class="corner">
                  </div>
                  <div v-if="activeIndex1 == 2" class="hb-num-r">{{ totalList.huifuHBPercent }}
                    <img v-if="totalList.length && parseFloat(totalList.huifuHBPercent.replace('%', '')) < 0" src="../assets/index/trending-down.png" class="corner">
                    <img v-if="totalList.length && parseFloat(totalList.huifuHBPercent.replace('%', '')) > 0" src="../assets/index/trending-up.png" class="corner">
                  </div>
                </div>
        </div>
        <div class="aboutLine pd2 mg2" v-loading="totalLoading" >
          <div class="totalEcharts">
            <div class="echartsCon">
              <fxsj-echarts v-if='totaCountlList.length' :formData='totaCountlList' ></fxsj-echarts>
            </div>
          </div>
        </div>
      </div>
      <!-- =====================96199========================== -->
      <div class="dataLi">
        <div class="data-head">
          <div id="aabb" class="title-name">
            <div>
              <span style="font-weight: bolder;font-size: .35rem;">96199服务热线</span>
            </div>
            <div style="color:#1F76FA;font-size:.25rem;" @click="toDetial(3)">
              查看详情>
            </div>
          </div>
        </div>
        <div class="main-data">
              <div class="main-left">
                <div class="left-top" >
                  <div>呼入量</div>
                  <div class="main-num">
                    <span>{{ staticForm.callinCount }}</span>
                  </div>
                </div>
                <div class="left-bottom">
                  <div>
                    <div class="font12">环比</div>
                    <div v-if="callDown" class="hb-num-l">{{ staticForm.hbCallinCountPercent }}
                      <img src="../assets/index/trending-down.png" class="corner">
                    </div>
                    <div v-if="callUp" class="hb-num-r">{{ staticForm.hbCallinCountPercent }}
                      <img src="../assets/index/trending-up.png" class="corner">
                    </div>
                  </div>
                </div>
              </div>
              <div class="main-right">
                <div class="right-top">
                  <div>接听量</div>
                  <div class="main-num">{{ staticForm.jtCount }}</div>
                </div>
                <div class="right-bottom">
                  <div class="font12">环比</div>
                  <div v-if="jtUp" class="hb-num-r">{{ staticForm.hbjtCountPercent }}
                    <img src="../assets/index/trending-up.png" class="corner">
                  </div>
                  <div v-if="jtDown" class="hb-num-l">{{ staticForm.hbjtCountPercent }}
                    <img src="../assets/index/trending-down.png" class="corner">
                  </div>
                </div>
              </div>
            </div>
        <div class="aboutLine pd2 mg2" v-loading="hjLoading" style="margin-top: .2rem;">
          <div class="totalEcharts">
            <div class="echartsCon">
              <total-echarts2 :formData='totalList2' style="margin-top:.4rem"></total-echarts2>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem } from "vux";

import UserGrowth from "./lwyd/echarts/userGrowth";
import totalEcharts from "./onLineService/components/totalEcharts";
import fxsjEcharts from "./onLineService/components/fxsjEcharts";
import totalEcharts2 from "./serviceHotline/components/totalEcharts";
export default {
  components: {
    Tab,
    TabItem,
    UserGrowth,
    totalEcharts,
    totalEcharts2,
    fxsjEcharts
  },
  data() {
    return {
      nowDay: "",
      typeList: [
        {
          name: "全部",
          value: "5"
        },
        {
          name: "APP",
          value: "1"
        },
        {
          name: "小程序",
          value: "2"
        },
        {
          name: "微信公众号",
          value: "3"
        },
        {
          name: "微博",
          value: "4"
        },
        {
          name: "抖音",
          value: "6"
        },
        {
          name: "支付宝小程序",
          value: "7"
        }
      ],
      zxkfArr: [
        {
          name: "咨询人数",
          value: "1"
        },
        {
          name: "接收消息",
          value: "2"
        },
        {
          name: "回复量",
          value: "3"
        }
      ],
      type: "5",
      lwydLoading: false,
      growthList: [],
      totalLoading: false,
      activeIndex: 0,
      activeIndex1: 0,
      totalInd: 0,
      totalList: [],
      totaCountlList: [],
      hjLoading: false,
      totalList2: [],
      staticForm: {},
      jtUp: false,
      jtDown: false,
      callUp: false,
      callDown: false,
    };
  },
  mounted() {
    this.nowDay = this.getYesterday();
    // this.getUserGrowth();
    this.getTotal();
    this.gettotalData();
    this.getStaticData();
  },
  methods: {
    async getStaticData()  {
      let starttime = this.nowDay + " 00:00:00";
      let endtime =
        this.nowDay + " 23:59:59";
      // 给后台的请求参数
      let params =
      // {
      //   startTime: starttime,
      //   endTime: endtime,
      //   parent: ''
      // };
      {
          "startTime":"2024-10-01 00:00:00",
          "endTime":"2024-10-22 23:59:59",
          "parent":"002200"
      }
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/wholeCallInCount', params)
      console.log(data,'首页96199');
      if(parseFloat(data.hbCallinCountPercent.replace('%', '')) >= 0){
        this.callUp = true
      }else{
        this.callDown = true
      }
      if(parseFloat(data.hbjtCountPercent.replace('%', '')) >= 0){
        this.jtUp = true
      }else{
        this.jtDown = true
      }
      this.staticForm = data;
    },
    //展示当天时间
    getYesterday() {
      //获取当天
      let currentDate = new Date().getTime();
      let prevTime = currentDate;
      let prevDate = new Date(prevTime);
      const time = str => {
        if (str >= 10) {
          return str;
        } else {
          return "0" + str;
        }
      };
      let yesterday =
        time(new Date(prevDate).getFullYear()) +
        "-" +
        time(new Date(prevDate).getMonth() + 1) +
        "-" +
        time(new Date(prevDate).getDate());
      return yesterday;
    },
    //改变数据类型触发
    changeType(index, e) {
      // console.log(this.tabActive);
      this.activeIndex = index;
      this.type = e.value;
      // console.log(this.type);
      // this.getUserGrowth();
    },
    //用户增长数据
    getUserGrowth(type) {
      this.lwydLoading = true;
      let url = "SocialPlatformAndApp/userIncreaseInfo";
      // 给后台的请求参数
      let data = {
        type: this.type,
        time: "1",
        beginDate: "",
        endDate: ""
      };
      this.$Post(
        url,
        data,
        ({ data }) => {
          this.growthList = data.list;
          this.lwydLoading = false;
        },
        err => {
          this.$alertShow(err.msg);
          this.lwydLoading = false;
        },
        true
      );
    },
    async getTotal() {
      this.totalLoading = true;
      let that = this;
      let starttime = this.nowDay + " 00:00:00";
      let endtime = this.nowDay + " 23:59:59";

      // 给后台的请求参数
      let params = {
        startTime: starttime,
        endTime: endtime,
        parent: ""
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/onlineAllCount', params)
      this.totalLoading = false;
      this.totalList = data.data;
      if( this.activeIndex1 == 0 ){
        const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/onlineAnswerMessageCount', params)
        this.totaCountlList = data.list;
      }else if( this.activeIndex1 == 1 ){
        const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/onlineCallInMessageCount', params)
        this.totaCountlList = data.list;
      }else if( this.activeIndex1 == 2 ){
        const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/onlineCallInMessageCountHuiFu', params)
        this.totaCountlList = data.list;
      }
    },
    totalItemClick(index, e) {
      // console.log(this.tabActive);
      this.activeIndex1 = index;
      // this.totalInd = ind;
      this.getTotal();
    },
    // gettotalData() {
    //   this.hjLoading = true;
    //   let url = "CustomerServiceForYicheng/callDataSt";
    //   // 给后台的请求参数
    //   let data = {
    //     startTime: "",
    //     endTime: "",
    //     dateType: "D",
    //     callSelect: "0",
    //     local: "D"
    //   };
    //   this.$Post(
    //     url,
    //     data,
    //     ({ data }) => {
    //       this.totalList2 = data.list1;
    //       this.hjLoading = false;
    //     },
    //     err => {
    //       this.$alertShow(err.msg);
    //       this.hjLoading = false;
    //     },
    //     true
    //   );
    // },
    async gettotalData(flag) {
      this.hjLoading = true;
      let starttime = this.nowDay + " 00:00:00";
      let endtime = this.nowDay + " 23:59:59";
      // 给后台的请求参数
      let params =
      {
        startTime: starttime,
        endTime: endtime,
        parent: ''
      };
      const { data } = await this.$PostRequest('lngsScreen/lngsWeChatScreen/wholeCallInGroup', params)
      this.totalList2 = data.list;
      this.hjLoading = false;
    },
    toDetial(ind) {
      if (ind == 1) {
        this.$router.push('/lwyd')
      } else if (ind == 2) {
        this.$router.push('/onLineService')
      } else {
        this.$router.push('/telephoneTraffic')
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "~vux/src/styles/close.less";



.main-data {
  display: flex;
  justify-content: space-around;
  padding: 0 0.2rem;
  margin-top: 0.1rem;

  .left-top {
    margin-bottom: 0.6rem;
  }

  .right-top {
    margin-bottom: 0.6rem;
  }

  .main-num {
    font-size: 0.7rem;
    color: #81B337;
    margin-top: 5px;
  }
.font12{font-size:0.25rem;
color:#999999}
  .hb-num-l {
    font-size: 0.3rem;
    color: #FF0000;
    margin-top: 15px;
  }

  .hb-num-r {
    font-size: 0.3rem;
    color: #377F7F;
    margin-top: 15px;
  }

  .corner {
    width: 0.3rem;
    height: 0.3rem;
  }
}



.title-name {
  display: flex;
  justify-content: space-between;

}

.echartsCon {
  padding: 0.2rem;
  border-radius: 0.2rem;
  margin-top: 0.2rem;
}

.zhineng {
  background: #0095fd;
  width: 0.1rem;
  height: 0.1rem;
  margin-right: 0.15rem;
}

.zhuanren {
  background: #07cc94;
  width: 0.1rem;
  height: 0.1rem;
  margin-right: 0.15rem;
}

.hr {
  background: #5cdbd3;
  width: 0.1rem;
  height: 0.1rem;
  margin-right: 0.15rem;
}

.jt {
  background: #7e6df5;
  width: 0.1rem;
  height: 0.1rem;
  margin-right: 0.15rem;
}
</style>
